<!DOCTYPE html>
<html lang="en" xmlns="http://java.sun.com/jsf/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #oContainer {
            width: 600px;
            height: 500px;
            border: 1px solid menu;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }

        a {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body onload="initListView()">
    <div id="oContainer"></div>
</body>
</html>
<script language="javascript">
    var oListView = new Object();

    function listView(_container) {
        this.author = '51JS.COM-ZMM';
        this.version = 'ListView 1.0';
        this.container = _container;
        this.box = new Object();
        this.headerWidth = 0;
        this.headerHeight = 20;
        this.itemWidth = 0;
        this.itemHeight = 0;
        this.rowsCount = 30;
        this.isResize = false;
        this.separate = new Object();
        this.startPoint = 0;
        this.endPoint = 0;
        this.tempSeparate = new Object();
        this.put_headerHeight = function (_height) {
            return _height;
        };
        this.get_headerHeight = function () {
            return this.headerHeight;
        };
        this.put_rowsCount = function (_count) {
            return _count;
        };
        this.get_rowsCount = function () {
            return this.rowsCount;
        };
    }

    listView.prototype = {
        boxInit: function () {
            this.container.innerHTML = new String();
            this.box = (function (_object) {
                var _box = document.createElement('DIV');
                with (_box) {
                    id = 'ListViewBox';
                    style.width = _object.offsetWidth;
                    style.height = _object.offsetHeight;
                    style.margin = '0px';
                    style.padding = '0px';
                    attachEvent('oncontextmenu', new Function('return false;'));
                }
                return _box;
            })(this.container);
            this.headerPanel = (function (_width, _height) {
                var _headerPanel = document.createElement('DIV');
                with (_headerPanel) {
                    style.width = _width;
                    style.height = _height;
                }
                return _headerPanel;
            })(this.box.style.width, this.headerHeight);
            this.headerPanel.appendChild(this.textPanel = (function () {
                var _textPanel = document.createElement('NOBR');
                _textPanel.attachEvent('onmousemove', function () {
                    with (oListView) {
                        if (event.button == 1) {
                            textPanel.style.cursor = 'E-resize';
                            tempSeparate.style.left = event.clientX - getPosition(box).left;
                            tempSeparate.style.display = 'inline';
                            endPoint = event.clientX;
                            isResize = true;
                        }
                    }
                });
                return _textPanel;
            })());
            this.rowItemPanel = (function (_width, _height) {
                var _itemPanel = document.createElement('DIV');
                with (_itemPanel) {
                    style.width = _width;
                    style.height = _height;
                    style.overflow = 'hidden';
                }
                return _itemPanel;
            })(this.box.style.width, parseInt(this.box.style.height) - this.headerHeight);
            this.rowItemPanel.appendChild(this.dataPanel = (function () {
                var _dataPanel = document.createElement('NOBR');
                with (_dataPanel) {
                    style.cursor = 'default';
                    attachEvent('onclick', function () {
                        document.selection.empty();
                    });
                    attachEvent('onselectstart', function () {
                        document.selection.empty();
                    });
                }
                return _dataPanel;
            })());
            this.dataPanel.appendChild(this.tempSeparate = (function (_height) {
                var _tempSeparate = document.createElement('SPAN');
                with (_tempSeparate) {
                    style.width = '1px';
                    style.height = _height;
                    style.border = '0px';
                    style.backgroundColor = 'black';
                    style.position = 'absolute';
                    style.display = 'none';
                }
                return _tempSeparate;
            })(this.rowItemPanel.style.height));
            this.box.appendChild(this.headerPanel);
            this.box.appendChild(this.rowItemPanel);
            this.container.appendChild(this.box);
        },

        drawListView: function (_headers, _aligns) {
            this.boxInit();
            this.drawHeader(_headers);
            this.drawRowItem(_headers, _aligns);
            document.attachEvent('onmouseup', this.finishResize);
        },

        drawHeader: function (_headers) {
            this.headers = [];
            this.headerWidth = Math.round((parseInt(this.headerPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1;
            for (var i = 0; i < _headers.length; i++) {
                var _header = document.createElement('SPAN');
                with (_header) {
                    style.width = this.headerWidth;
                    style.height = this.headerHeight;
                    style.overflow = 'hidden';
                    style.backgroundColor = 'buttonface';
                    style.borderLeft = '1px solid buttonhighlight';
                    style.borderTop = '1px solid buttonhighlight';
                    style.borderRight = '1px solid buttonshadow';
                    style.borderBottom = '1px solid buttonshadow';
                    style.textAlign = 'center';
                    style.fontSize = '12px';
                    style.fontFamily = 'Sans-Serif, Tahoma';
                    style.paddingTop = '1px';
                    innerText = _headers[i];
                }
                this.textPanel.appendChild(_header);
                this.headers[this.headers.length] = _header;
                var _separate = this.getSeparate(true);
                this.textPanel.appendChild(_separate);
                this.headers[this.headers.length] = _separate;
            }
            var _last = document.createElement('SPAN');
            with (_last) {
                style.width = this.headerPanel.offsetWidth;
                style.height = this.headerHeight;
                style.overflow = 'hidden';
                style.backgroundColor = 'buttonface';
                style.borderLeft = '1px solid buttonhighlight';
                style.borderTop = '1px solid buttonhighlight';
                style.borderRight = '1px solid buttonshadow';
                style.borderBottom = '1px solid buttonshadow';
                style.textAlign = 'center';
                style.fontSize = '12px';
                style.fontFamily = 'Sans-Serif, Tahoma';
                style.paddingTop = '1px';
                innerText = new String();
            }
            this.textPanel.appendChild(_last);
            this.headers[this.headers.length] = _last;
        },

        drawRowItem: function (_headers, _aligns) {
            this.items = [];
            this.itemWidth = Math.round((parseInt(this.rowItemPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1;
            this.itemHeight = parseInt(this.rowItemPanel.style.height) - 2;
            for (var i = 0; i < _headers.length; i++) {
                var _item = document.createElement('SPAN');
                with (_item) {
                    style.width = this.itemWidth;
                    style.height = this.itemHeight;
                    style.overflow = 'hidden';
                    style.padding = '0px';
                    appendChild((function (_count, _width, _height, _align) {
                        var _table = document.createElement('TABLE');
                        with (_table) {
                            cellSpacing = 0;
                            cellPadding = 0;
                            style.width = _width;
                            style.tableLayout = 'fixed';
                        }
                        var _tbody = document.createElement('TBODY');
                        for (var i = 0; i < _count; i++) {
                            var _tableTr = document.createElement('TR');
                            var _tableTd = document.createElement('TD');
                            with (_tableTd) {
                                align = _align;
                                style.height = _height;
                                style.borderBottom = '1px solid #c6c3c6';
                                style.fontSize = '12px';
                                style.paddingLeft = '3px';
                                setAttribute('onclick', function () {
                                    oListView.selectedRow(this.parentNode.rowIndex);
                                });
                                setAttribute('ondblclick', function () {
                                    oListView.showSelected(this.parentNode.rowIndex);
                                });
                                innerHTML = new String(' ');
                            }
                            _tableTr.appendChild(_tableTd);
                            _tbody.appendChild(_tableTr);
                        }
                        _table.appendChild(_tbody);
                        return _table;
                    })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount), _aligns[i]));
                }
                this.dataPanel.appendChild(_item);
                this.items[this.items.length] = _item;
                var _separate = this.getSeparate(false);
                _separate.style.height = this.itemHeight;
                this.dataPanel.appendChild(_separate);
                this.items[this.items.length] = _separate;
            }
            var _last = document.createElement('SPAN');
            with (_last) {
                style.width = this.rowItemPanel.offsetWidth;
                style.height = this.itemHeight;
                style.overflow = 'hidden';
                style.padding = '0px';
                appendChild((function (_count, _width, _height) {
                    var _table = document.createElement('TABLE');
                    with (_table) {
                        cellSpacing = 0;
                        cellPadding = 0;
                        style.width = '100%';
                    }
                    var _tbody = document.createElement('TBODY');
                    for (var i = 0; i < _count; i++) {
                        var _tableTr = document.createElement('TR');
                        var _tableTd = document.createElement('TD');
                        with (_tableTd) {
                            style.height = _height;
                            style.borderBottom = '1px solid menu';
                            innerHTML = new String('<nobr style="height: ' + eval(_height - 1) + ';overflow: hidden;"> </nobr>');
                        }
                        _tableTr.appendChild(_tableTd);
                        _tbody.appendChild(_tableTr);
                    }
                    _table.appendChild(_tbody);
                    return _table;
                })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount)));
            }
            this.dataPanel.appendChild(_last);
            this.items[this.items.length] = _last;
        },

        getSeparate: function (_resize) {
            var _separate = document.createElement('SPAN');
            with (_separate) {
                style.width = _resize ? '2px' : '1px';
                style.height = this.headerHeight;
                style.border = '1px ' + (_resize ? 'inset white' : 'solid #c6c3c6');
                style.overflow = 'hidden';
                style.position = 'absolute';
                if (_resize) {
                    attachEvent('onmousedown', function () {
                        with (oListView) {
                            separate = event.srcElement;
                            startPoint = event.clientX;
                        }
                    });
                    attachEvent('onmouseenter', function () {
                        event.srcElement.style.cursor = 'E-resize';
                    });
                }
            }
            return _separate;
        },

        getPosition: function (_object) {
            var _top = _left = 0;
            var _root = document.body;
            while (_object != _root) {
                _left += _object.offsetLeft;
                _object = _object.offsetParent;
            }
            return {left: _left};
        },

        resizeItem: function () {
            with (this) {
                var _width, _movePart = endPoint - startPoint;
                for (var i = 0; i < headers.length; i++) {
                    if (headers[i] == separate) {
                        var _bool = true;
                        _bool = _bool && (_movePart < 0);
                        _bool = _bool && (parseInt(headers[i - 1].style.width) < Math.abs(_movePart));
                        if (_bool) {
                            headers[i - 1].style.width = 0;
                            items[i - 1].style.width = 0;
                        } else {
                            _width = parseInt(headers[i - 1].style.width);
                            headers[i - 1].style.width = _width + _movePart;
                            _width = parseInt(items[i - 1].style.width);
                            items[i - 1].style.width = _width + _movePart;
                            _width = parseInt(items[i - 1].firstChild.style.width);
                            items[i - 1].firstChild.style.width = _width + _movePart;
                            var _table = items[i - 1].firstChild;
                            for (var j = 0; j < _table.rows.length; j++) {
                                var _dataPanel = _table.rows[j].cells[0].children[0];
                                if (typeof _dataPanel != 'undefined') {
                                    _width = parseInt(_dataPanel.style.width);
                                    _dataPanel.style.width = _width + _movePart;
                                }
                            }
                        }
                    }
                }
            }
        },

        finishResize: function () {
            with (oListView) {
                if (isResize) {
                    isResize = false;
                    textPanel.style.cursor = 'default';
                    tempSeparate.style.display = 'none';
                    resizeItem();
                }
            }
        },

        addListItem: function (_datas) {
            var _itemNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length;
            for (var i = 0; i < _itemNum; i++) {
                var n = 0;
                for (j = 0; j < this.items.length - 2; j++) {
                    if (j % 2 == 0) {
                        var _dataPanel = document.createElement('NOBR');
                        var _tableCell = this.items[j].firstChild.rows[i].cells[0];
                        with (_dataPanel) {
                            style.width = this.itemWidth;
                            style.overflow = 'hidden';
                            style.textOverflow = 'ellipsis';
                            innerHTML = _datas[i][n];
                        }
                        _tableCell.innerHTML = new String();
                        _tableCell.appendChild(_dataPanel);
                        _tableCell.title = _datas[i][0];
                        n++;
                    }
                }
            }
        },

        selectedRow: function (n) {
            for (var i = 0; i < this.items.length; i++) {
                if (i % 2 == 0) {
                    var _table = this.items[i].firstChild;
                    for (var j = 0; j < _table.rows.length; j++) {
                        var _dataPanel = _table.rows[j].cells[0].children[0];
                        if (typeof _dataPanel != 'undefined') {
                            if (j == n) {
                                _table.rows[j].cells[0].style.color = 'highlighttext';
                                _table.rows[j].cells[0].style.backgroundColor = 'highlight';
                            } else {
                                _table.rows[j].cells[0].style.color = '';
                                _table.rows[j].cells[0].style.backgroundColor = '';
                            }
                            var _children = _table.rows[j].cells[0].firstChild.children;
                            this.changeChild(_children, j == n);
                        }
                    }
                }
            }
        },

        changeChild: function (_children, _isSelected) {
            if (typeof _children != 'undefined') {
                for (var i = 0; i < _children.length; i++) {
                    if (_isSelected) {
                        _children[i].style.color = 'highlighttext';
                        _children[i].style.backgroundColor = 'highlight';
                    } else {
                        _children[i].style.color = '';
                        _children[i].style.backgroundColor = '';
                    }
                }
            } else {
                return false;
            }
        },

        showSelected: function (n) {
            var _text = new String();
            for (var i = 0; i < this.items.length - 2; i++) {
                if (i % 2 == 0) {
                    var _table = this.items[i].firstChild;
                    _text += this.headers[i].innerText + ':\n';
                    _text += _table.rows[n].cells[0].firstChild.innerHTML + '\n\n';
                }
            }
            alert(_text);
        }
    }

    function initListView() {
        var _headers = [];
        _headers[_headers.length] = '标题';
        _headers[_headers.length] = '内容';
        _headers[_headers.length] = '时间';
        _headers[_headers.length] = '管理';
        var _aligns = [];
        _aligns[_aligns.length] = 'left';
        _aligns[_aligns.length] = 'left';
        _aligns[_aligns.length] = 'center';
        _aligns[_aligns.length] = 'center';
        oListView = new listView(self.oContainer);
        oListView.drawListView(_headers, _aligns);

        var _items = [];
        _items[_items.length] = ['标题一', '内容一', '2006-6-21 10:30:00', ''];
        _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', ''];
        _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', ''];
        oListView.addListItem(_items);
    }

</script>